<template>
  <div id="index">
    <div @click="upClick" v-swipeup="{fn:upClick,name:'上滑'}" class="icon_up animated bounce"></div>
    <div class="modal" v-if="isShow">
      <div class="modal-body">
        <img :src="shareImg" />
        <div @click="closeBtnClick" class="close"></div>
      </div>
    </div>
    <guide></guide>
    <!-- <share></share> -->
  </div>
</template>

<script>
// import Share from '@/components/common/share.vue'
import Guide from '@/components/common/guide.vue'
export default {
  name: 'index',
  data () {
    return {
       isShow: false,
       shareImg: require('../../assets/images/miaotaiche.png'),
    }
  },
  components: {
    // Share,
    Guide
  },
  mounted(){
    this.getWeXinInfo();
  },
  activated(){
    this.wx_config();
  },
  methods: {


     // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      // var pageUrl = location.href.split('?')[0];
      self.$axios.get('wx_config',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
          console.log('ready')
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
    // 上 按钮点击事件
    upClick: function(){
        this.$router.push('/home');
    },
    // 关闭
    closeBtnClick: function(){
      this.isShow = false;
    },
    // 获取用户的 微信信息
    getWeXinInfo: function(){
      var self = this;
      var code = self.$utils.getquerystring('code') || '';
      var ip = returnCitySN.cip;
      console.log('code = ' + code);
      // return;
      self.$axios.get('userInfo',{
        params: {
          code: code,
          ip: ip
        }
      }).then(function (res){
        if (res.data.status == 100) {
          self.$utils.wxInfo = res.data.data;
          self.isShow = false;
        } else {
          self.isShow = true;
        }
      }).catch(function (error) {
        // self.isShow = true;
      });
    },
  },
}
</script>
<style scoped lang="less">
#index{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('../../assets/images/bg_index.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.icon_up{
    width: 100%;
    height: 167px;
    z-index: 100;
    background-image: url(../../assets/images/icon_up.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 105px 167px;
    /* background-color: red; */
    position: absolute;
    bottom: 60px;
}
.animated{
    animation-iteration-count: 1000;
}

.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 400px;
    height: 600px;
    border-radius: 12px;
    margin: 380px auto 0;
    text-align: center;
    img{
      width: 337px;
      height: 430px;
      display: inline-table;
      margin: auto;
    }
    // background-image: url(../../assets/images/mtcApp.png);
    // background-position: center center;
    // background-repeat: no-repeat;
    // background-size: 337px 430px;
    position: relative;
    // border: solid 1px #a0d9f6;
    .close{
      width: 70px;
      height: 70px;
      position: absolute;
      top: -35px;
      right: -35px;
      background-image: url(../../assets/images/icon_close.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 60px 60px;
    }
  }
}

</style>
